<template>
  <div>
    <van-nav-bar title="所有订单" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-tabs v-model:active="active">
      <van-tab title="全部">

        <!-- list列表 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

          <van-swipe-cell v-for="item in allList">
            <van-cell :border="true" :title=item.title :value=item.status />
            <!-- 商品列表 -->
            <van-card :desc=item.time :title=item.desc class="goods-card" :thumb="item.img" />
            <p class="first"><span>总计 {{ item.num }} 项,共 ¥ {{ item.price }} 元</span></p>
            <p><van-button plain size="small" type="primary" @click="cancel(item.id)">取消订单</van-button>
              <van-button plain size="small" type="success" v-if="!item.pay" @click="pay(item.id)">立即支付</van-button>
            </p>
          </van-swipe-cell>
        </van-list>


      </van-tab>
      <van-tab title="待付款">

        <!-- list列表 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-swipe-cell v-for="item in payList">
            <van-cell :border="true" :title=item.title :value=item.status />
            <!-- 商品列表 -->
            <van-card :desc=item.time :title=item.desc class="goods-card" :thumb="item.img" />
            <p class="first"><span>总计 {{ item.num }} 项,共 ¥ {{ item.price }} 元</span></p>
            <p><van-button plain size="small" type="primary" @click="cancel(item.id)">取消订单</van-button>
              <van-button plain size="small" type="success" v-if="!item.pay" @click="pay(item.id)">立即支付</van-button>
            </p>
          </van-swipe-cell>
        </van-list>
      </van-tab>
      <van-tab title="已付款">
        <!-- list列表 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-swipe-cell v-for="item in payAlreadyList">
            <van-cell :border="true" :title=item.title :value=item.status />
            <!-- 商品列表 -->
            <van-card :desc=item.time :title=item.desc class="goods-card" :thumb="item.img" />
            <p class="first"><span>总计 {{ item.num }} 项,共 ¥ {{ item.price }} 元</span></p>
            <p><van-button plain size="small" type="primary" @click="cancel(item.id)">取消订单</van-button>
            </p>
          </van-swipe-cell>
        </van-list>
      </van-tab>
      <van-tab title="已完成">
        <!-- list列表 -->
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <van-swipe-cell v-for="item in payAlreadyList">
            <van-cell :border="true" :title=item.title :value=item.status />
            <!-- 商品列表 -->
            <van-card :desc=item.time :title=item.desc class="goods-card" :thumb="item.img" />
            <p class="first"><span>总计 {{ item.num }} 项,共 ¥ {{ item.price }} 元</span></p>
            <p><van-button plain size="small" type="primary">取消订单</van-button>
              <van-button plain size="small" type="success" v-if="!item.pay">立即支付</van-button>
            </p>
          </van-swipe-cell>
        </van-list>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getlistAll } from '@/api/order'
import { showSuccessToast, showFailToast } from 'vant';

const list = ref([]);
const allList = ref([])
const loading = ref(false);
const finished = ref(false);
const active = ref('')

const num = ref(1);
const money = ref(1);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 5; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 10) {
      finished.value = true;
    }
  }, 1000);
};
const payList = ref([])
const payAlreadyList = ref([])

//点单
getlistAll().then(res => {
  // console.log(res.data.data);
  allList.value = res.data.data
  //已付款
  payAlreadyList.value = allList.value.filter(item => {
    console.log(123123, item.status);
    return item.pay === 1
  })
  // console.log(payAlreadyList.value);

  //待付款
  payList.value = allList.value.filter(item => {
    console.log(item.status);

    return item.pay !== 1
  })
})

//取消订单
let cancel = (index) => {
  showSuccessToast('取消订单成功')
  // console.log(index);
  allList.value = allList.value.filter(item => {
    return item.id !== index
  })
  payList.value = payList.value.filter(item => {
    return item.id !== index
  })
  // console.log(allList.value);
}

//立即支付
let pay = (index) => {
  // console.log(index);
  const info = allList.value.find(item => {
    return item.id == index
  })
  info.pay = 1
  info.status = '已支付'


  //=>待付款
  payList.value = allList.value.filter(item => {
    // item.status="待支付"
    return item.pay !== 1
  })
  //=>已付款
  payAlreadyList.value = allList.value.filter(item => {
    // item.status="已付款"
    console.log(456456, item.status);
    return item.pay === 1
  })
  // console.log(allList.value);
  showSuccessToast('支付订单成功')
}

</script>
 
<style lang="scss" scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

p {
  line-height: 20px;
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: .2rem;

}

.van-list {
  border: 1px solid #f8f8f8;
}

.first {
  padding-right: .3rem;
  color: orange;
  height: 20px;
  line-height: 20px;
}

.order {
  border: 2px solid black;
}

.van-button--small {
  margin-right: 10px;
}

.delete-button {
  height: 100%;
}
</style>